<template>
	<view class="c_container">
		<view class="c_header"></view>
		<view class="car_box">
			<view style="padding: 10rpx 20rpx;">
				<view class="cb_head">
					<view class="cb_left">
						<text class="x_amount" style="margin-right: 20rpx;">卡号</text>
						<text class="x_amount">{{objParams.cardNo}}</text>
					</view>
					<text class="x_recode" @click="jumpRecode"  v-if="loginFlag">充值记录</text>
				</view>
				<text style="line-height: 40rpx;" class="x_amount">所在区域：{{objParams.zoneName == null ? '' : objParams.zoneName}}</text>
				<view style="line-height: 40rpx;display: flex;flex-direction: column;">
					<text class="x_amount">班级：{{objParams.major == null ? '' : objParams.major}}</text>
					<text class="x_amount">部门：{{objParams.deptName == null ? '' : objParams.deptName}}</text>
					<text class="x_amount">姓名：{{objParams.empName == null ? '' : objParams.empName}}</text>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<view class="cz_box_bottom">
						<text class="x_amount">{{objParams.walletId == 1 ? '现金钱包': objParams.walletId == 4 ? '热水钱包': ''}}余额:</text>
						<text class="cz_box_bottom_num" style="margin-left: 20rpx;" v-if="countUser > 0">{{Number(objParams.balance).toFixed(2)}}</text>
						<text class="x_amount" style="margin-top: 20rpx;margin-left: 20rpx;" v-else>****</text>
					</view>
					<button type="primary" class="lisi" style="background-color: #477EDA;" v-if="countUser == 0" @click="kanYue">查看余额</button>
				</view>
			</view>
		</view>
		<view class="in_boxs">
			<view class="am_box">
				<text class="am_txt">充值金额：</text>
				<input type="digit" placeholder-class="account-txt" v-model="tranAmt" class="recharge_box" placeholder="请输入充值金额" />
			</view>
		</view>
		<view class="boxsss" v-if="showBox">
			<view class="modal_boxs" style="position: relative;">
				<view style="padding: 40rpx 20rpx;display: flex;justify-content: center;align-items: center;">
					<text class="modal_box">请输入校园卡密码</text>
				</view>
				
				<view class="uni-list-cell-db">
					<!-- #ifndef MP-ALIPAY -->
					<input type="password" v-model="idCardPass" class="uni-input" placeholder="请输入卡密码" />
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<input password v-model="idCardPass" class="uni-input" placeholder="请输入卡密码" />
					<!-- #endif -->
				</view>
				<view style="display: flex;flex-direction: row; justify-content: center;align-items: center;">
					<button type="primary" class="lisis" style="background-color: #477EDA;margin: 30rpx;font-size: 28rpx;" @click="cancelFlag">取消</button>
					<button type="primary" class="lisis" style="background-color: #477EDA;margin: 30rpx;font-size: 28rpx;" @click="querenCK">确认</button>
				</view>
			</view>
		</view>
		<!-- #ifndef APP-PLUS -->
		<view style="display: flex;justify-content: center;align-items: center;background-color: #FFFFFF;padding-top: 100rpx;">
			<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="wxCZ">
				<!-- #ifdef MP-WEIXIN -->
				微信支付
				<!-- #endif -->
				<!-- #ifdef H5 -->
				微信支付
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				支付宝支付
				<!-- #endif -->
			</button>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="app_box">
			<view class="app_box_item">
				<view style="text-align: center;">
					<text>支付方式</text>
				</view>
				<view class="app_box_items">
					<radio-group @change="radioChange">
						<view class="app_box_top" v-for="(item, index) in list" :key="index">
							<view class="app_box_middle">
								<image style="width: 50rpx;height: 50rpx;" :src="item.channelName == '微信' ? '/static/images/home/weixin.png' : '/static/images/home/alipay.png'"></image>
								<text style="margin-left: 20rpx;">{{item.channelName}}</text>
							</view>
							<label class="radio"><radio :value="item.channelName" :checked="radioIndex == index" /></label>
						</view>
					</radio-group>
				</view>
				<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="pay">确认支付</button>
			</view>
		</view>
		<!-- #endif -->
		<custom-modal :isShow="showMcModal" :content="content" :title="title" @cancel='bb' :inp="false" @ok='cc' :okBtn="okBtn"/>
	</view>
</template>

<script>
	import {checkCardPwd} from '../../common/api/index.js'
	import {commonPay, XK_MODE, _pay, appPayList} from '../../common/utils/pay_center.js'
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import customModal from '../../components/custom-modal/custom-modal.vue';
	export default {
		onLoad: function (option) {
			this.objParams = {...JSON.parse(decodeURIComponent(option.objParams))}
		},
		components: {
			customModal
		},
		data() {
			return {
				objParams: {},
				tranAmt: '',
				radioIndex: 0,
				radioName: '微信',
				list: [],
				idCardPass: '',
				countUser: 0,
				loginFlag: uni.getStorageSync('s_login'),
				showBox: false,
				showMcModal: false,
				title: '',
				content: '',
				okBtn: '',
				url: '',
			}
		},
		onShow:function(){
			// #ifdef APP-PLUS
			this.getPayList()
			// #endif
		},
		methods: {
			bb() {},
			cc() {},
			_showModal(option){
				this.title = option.title
				this.content = option.content
				this.showMcModal = true
				this.okBtn = '确认支付'
				this.cc = ()=>{
					this.showMcModal = false
					option.confirm()
				}
				this.bb = ()=>{
					this.showMcModal = false
					option.cancel()
				}
			},
			pay() {
				if(this.tranAmt == '') {
					_showToast('请输入充值金额')
				} else {
					if(this.radioName !== '支付宝' && this.radioName !== '微信') {
						_showToast('暂不支持该支付渠道支付')
					} else {
						let _that = this
						this._showModal({
							title: '确认支付',
							content: `本次支付的金额为：${this.tranAmt} 元`,
							confirm: function (){
								let channelId = _that.list.filter(item => item.channelName === _that.radioName)[0].channelId
								_pay(_that.tranAmt, _that.objParams, channelId, _that)
							},
							cancel: function(){
								 _that.tranAmt = ''
							}
						})
					}
				}
			},
			radioChange(evt) {
				if(evt.detail.value == '支付宝') {
					this.radioName = evt.detail.value
					this.radioIndex = 1
				} else if(evt.detail.value == '微信') {
					this.radioName = evt.detail.value
					this.radioIndex = 0
				} else {
					this.radioName = evt.detail.value
				}
			},
			getPayList() {
				_showLoading('加载中,请稍后…')
				let payList = appPayList(XK_MODE, this.objParams)(this.tranAmt)
				payList.then(res => {
					this.list = res
				})
			},
			kanYue() {
				this.showBox = true
			},
			cancelFlag() {
				this.showBox = false;
			},
			querenCK() {
				uni.showLoading()
				checkCardPwd({
					orgId: this.objParams.orgId,
					cardNo: this.objParams.cardNo,
					cardPwd: this.idCardPass
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						if(res.data == 0) {
							this.countUser = 1;
							this.showBox = false;
						} else if(res.data == 1) {
							uni.hideLoading()
							_showToast('输入校卡密码错误，请重新输入！')
							this.idCardPass = null;
						}
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err);
				})
			},
			jumpRecode() {
				uni.navigateTo({
					url: '../recode/chargeRecode?walletObj='+ encodeURIComponent(JSON.stringify(this.objParams))
				})
			},
			wxCZ() {
				if(this.tranAmt == '') {
					_showToast('请输入充值金额')
				} else {
					let _thar = this
					this._showModal({
						title: '确认支付',
						content: `本次支付的金额为：${this.tranAmt} 元`,
						confirm: function (){
							// #ifdef MP-WEIXIN
							wx.requestSubscribeMessage({
								tmplIds: ['zZygSFbCHBCnaXjCYH4pSFpkccKCVNfL_WeAd58-WDY'],
								success (res) {
									commonPay(XK_MODE, _thar.objParams)(_thar.tranAmt, _thar)
								},
								fail(err) {
									console.log(err)
								}
							})
							// #endif
							// #ifdef H5
							commonPay(XK_MODE, _thar.objParams)(_thar.tranAmt, _thar)
							// #endif
							// #ifdef MP-ALIPAY
							commonPay(XK_MODE, _thar.objParams)(_thar.tranAmt, _thar)
							// #endif
						},
						cancel: function(){
							 _thar.tranAmt = ''
						}
					})
				}
			}
		}
	}
</script>

<style>
	.c_container {
		height: 100%;
		position: relative;
	}
	.c_header {
		width: 100vw;
		height: 220rpx;
		background-image: url('');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		position: relative;
	}
	.app_box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		padding-top: 30rpx;
	}
	.app_box_item {
		width: 100%;
		padding: 0 50rpx 50rpx 50rpx;
	}
	.app_box_items {
		display: flex;
		flex-direction: column;
	}
	.app_box_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.app_box_top:last-child {
		margin-bottom: 0;
	}
	.app_box_middle {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.btn_pri {
		width: 70%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: "PingFangSC-Heavy, PingFang SC";
		font-weight: 600;
		color: #FFFFFF;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
		border-radius: 8rpx;
	}
	.boxsss {
		width: calc(100% - 40rpx);
		height: 100%;
		display: block;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background-color: rgba(102, 102, 102, 0.498039215686275);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		z-index: 99;
	}
	.modal_boxs {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: rgba(252, 252, 252, 1);
		border-radius: 10rpx;
	}
	.cz_box_bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		vertical-align: middle;
		flex: 1;
	}
	.lisi {
		border-radius: 10rpx;
		float: right;
		width: 25%;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
	}
	.lisis {
		border-radius: 10rpx;
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
	}
	.cz_box_bottom_num {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 36rpx;
		color: #333333;
	}
	.mh_img {
		width: 100%;
		height: 100%;
	}
	.cb_head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}
	.cb_left {
		display: flex;
		flex-direction: row;
	}
	.x_amount {
		font-size: 30rpx;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #6B707A;
	}
	.x_recode {
		font-family: "PingFangSC";
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(60, 151, 249, 1);
	}
	.car_box {
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		width: 92%;
		position: absolute;
		top: 125rpx;
		left: 4%;
		background-color: #ffffff;
	}
	.uni-input {
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		padding: 10rpx;
		margin-top: 20rpx;
	}
	.recharge_box{
		margin-top: 40rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 0 24rpx;
		font-size: 40rpx;
		border: 1px solid #E6E6E6;
	}
	.am_txt {
		font-size: 32rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #333333;
	}
	.am_box {
		display: flex;
		flex-direction: column;
	}
	.in_boxs {
		padding: 70rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 210rpx;
	}
	.account-txt {
		font-size: 32rpx;
	}
</style>
